import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import './index.css'
var camera1,camera2,camera3,camera4
var scene
var renderer1,renderer2,renderer3,renderer4
let w = 710,h=500
function main(){
  creatCamera()
  createRenderer()
  createGeometry1()
  // createGeometry2()
  // createGeometry3()
  // createGeometry4()
}

function creatCamera(){
  scene = new THREE.Scene()

  camera1 = new THREE.PerspectiveCamera(45,w/h,1,10000)
  camera1.position.z = 800
  camera1.up.y = 1
  
  camera2 = new THREE.PerspectiveCamera(45,w/h,1,10000)
  camera2.position.x = 800
  camera2.up.y = 1

  camera3 = new THREE.PerspectiveCamera(45,w/h,1,10000)
  camera3.position.y = 800
  camera3.up.z = 1

  camera4 = new THREE.PerspectiveCamera(45,w/h,1,10000)
  camera4.position.x = 500
  camera4.position.z = 500
  camera4.up.y = 1

  camera1.lookAt(scene.position)
  camera2.lookAt(scene.position)
  camera3.lookAt(scene.position)
  camera4.lookAt(scene.position)
}
function createRenderer(){

  renderer1 = new THREE.WebGLRenderer()
  renderer1.setSize(w,h)

  renderer2 = new THREE.WebGLRenderer()
  renderer2.setSize(w,h)

  renderer3 = new THREE.WebGLRenderer()
  renderer3.setSize(w,h)

  renderer4 = new THREE.WebGLRenderer()
  renderer4.setSize(w,h)

  document.getElementById('canvas-wrapper1').appendChild(renderer1.domElement)
  document.getElementById('canvas-wrapper2').appendChild(renderer2.domElement)
  document.getElementById('canvas-wrapper3').appendChild(renderer3.domElement)
  document.getElementById('canvas-wrapper4').appendChild(renderer4.domElement)
}

function createGeometry1(){
  var g1 = new THREE.SphereGeometry(100,32,32)
  var m1 = new THREE.MeshBasicMaterial({color:0xff00,side:THREE.DoubleSide})
  var mesh1 = new THREE.Mesh(g1,m1)
  mesh1.position.x = -250
  var mesh2 = new THREE.Mesh(g1,m1)
  var mesh3 = new THREE.Mesh(g1,m1)
  mesh3.position.x = 250

  var g2 = new THREE.PlaneGeometry(700,300)
  var mesh4 = new THREE.Mesh(g2,m1)
  mesh4.position.y = -150
  mesh4.rotateX(80)
  scene.add(mesh1)
  scene.add(mesh2)
  scene.add(mesh3)
  scene.add(mesh4)
}
function render() {
  
  renderer1.render(scene, camera1)
  renderer2.render(scene, camera2)
  renderer3.render(scene, camera3)
  renderer4.render(scene, camera4)
}
main()
render()
// /** --------------------鼠标控件对象--------------------- */
let controls1 = new OrbitControls(camera1, renderer1.domElement); //创建控件对象
let controls2 = new OrbitControls(camera2, renderer2.domElement); //创建控件对象
let controls3 = new OrbitControls(camera3, renderer3.domElement); //创建控件对象
let controls4 = new OrbitControls(camera4, renderer4.domElement); //创建控件对象
controls1.addEventListener("change", render); //监听鼠标、键盘事件
controls2.addEventListener("change", render); //监听鼠标、键盘事件
controls3.addEventListener("change", render); //监听鼠标、键盘事件
controls4.addEventListener("change", render); //监听鼠标、键盘事件